<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metas -->
    <title>curtains.js | Documentation | Migration guide from previous version to v7.0</title>
    <meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <link rel="canonical" href="https://www.curtainsjs.com/migration-guide-to-v7.html">

    <!-- Facebook OG -->
    <meta property="og:title" content="curtains.js | Documentation | Migration guide from previous version to v7.0">
    <meta property="og:type" content="website">
    <meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta property="og:url" content="https://www.curtainsjs.com/migration-guide-to-v7.html">
    <meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Twitter card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@martinlaxenaire">
    <meta name="twitter:creator" content="@martinlaxenaire">
    <meta name="twitter:title" content="curtains.js | Documentation | Migration guide from previous version to v7.0">
    <meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
    <link rel="manifest" href="images/favicons/site.webmanifest">
    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
    <link rel="shortcut icon" href="images/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#202340">
    <meta name="msapplication-config" content="images/favicons/browserconfig.xml">
    <meta name="theme-color" content="#202340">

    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="page-wrap">

    <div id="canvas"></div>

    <div id="content">

        <header id="header">
            <div class="wrapper">
                <div id="header-wrapper" class="flex-wrapper">
                    <div id="header-title">
                        <a href="/" title="Home">curtains.js</a>
                    </div>
                    <nav id="main-menu">
                        <ul class="flex-wrapper">
                            <li>
                                <a href="get-started.html">Get started</a>
                            </li>
                            <li>
                                <a href="documentation.html" class="active">Docs</a>
                            </li>
                            <li>
                                <a href="download.html">Download</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <section class="content-section api-section">

            <nav id="api-menu-nav">

                <ul id="api-menu">
                    <li class="active">
                        <div class="api-top-menu-item">Core</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="curtains-class.html">Curtains</a>
                            </li>
                            <li>
                                <a href="plane-class.html">Plane</a>
                            </li>
                            <li>
                                <a href="texture-class.html">Texture</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <div class="api-top-menu-item">Frame Buffer Objects</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="render-target-class.html">RenderTarget</a>
                            </li>
                            <li>
                                <a href="shader-pass-class.html">ShaderPass</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <div class="api-top-menu-item">Loaders</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="texture-loader-class.html">TextureLoader</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <div class="api-top-menu-item">Math</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="vec-2-class.html">Vec2</a>
                            </li>
                            <li>
                                <a href="vec-3-class.html">Vec3</a>
                            </li>
                            <li>
                                <a href="mat-4-class.html">Mat4</a>
                            </li>
                            <li>
                                <a href="quat-class.html">Quat</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <div class="api-top-menu-item">Extras</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="ping-pong-plane-class.html">PingPongPlane</a>
                            </li>
                            <li>
                                <a href="fxaa-pass-class.html">FXAAPass</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <div id="api-content">

                <div class="api-content-inner">
                    <div class="inner-section">
                        <h1>Migration guide from previous version to v7.0 or ulterior</h1>

                        <p>
                            Luckily, migrating from a previous version to the v7.0 should be pretty straightforward as there are not many breaking changes.
                        </p>

                        <h2>Deprecations</h2>

                        <p>
                            Here's a list of all deprecated methods:
                        </p>

                        <ul class="main-classes-list">
                            <li>
                                <h3>Curtains class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <strong>addPlane():</strong> you should now use the <a href="plane-class.html">Plane class</a> constructor instead.<span class="api-item-version">v7.0</span>
                                    </li>
                                    <li>
                                        <strong>addRenderTarget():</strong> you should now use the <a href="render-target-class.html">RenderTarget class</a> constructor instead.<span class="api-item-version">v7.0</span>
                                    </li>
                                    <li>
                                        <strong>addShaderPass():</strong> you should now use the <a href="shader-pass-class.html">ShaderPass class</a> constructor instead.<span class="api-item-version">v7.0</span>
                                    </li>
                                    <li>
                                        <strong>removePlane():</strong> you should now use the <a href="plane-class.html#remove">Plane class remove() method</a> instead.<span class="api-item-version">v7.0</span>
                                    </li>
                                    <li>
                                        <strong>removeRenderTarget():</strong> you should now use the <a href="render-target-class.html#remove">RenderTarget class remove() method</a> instead.<span class="api-item-version">v7.0</span>
                                    </li>
                                    <li>
                                        <strong>removeShaderPass():</strong> you should now use the <a href="shader-pass-class.html#remove">ShaderPass class remove() method</a> instead.<span class="api-item-version">v7.0</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h3>Plane class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <strong>setRelativePosition():</strong> you should use the <a href="plane-class.html#set-relative-translation">setRelativeTranslation()</a> method instead.<span class="api-item-version">v8.0</span>
                                    </li>
                                    <li>
                                        <strong>moveToFront():</strong> you should use the <a href="plane-class.html#set-render-order">setRenderOrder()</a> method instead.<span class="api-item-version">v8.0</span>
                                    </li>
                                    <li>
                                        <strong>planeResize():</strong> you should use the <a href="plane-class.html#resize">resize()</a> method instead.<span class="api-item-version">v7.3</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h3>Texture class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <strong>setFromTexture():</strong> you should use the <a href="texture-class.html#copy">copy()</a> method instead.<span class="api-item-version">v7.3</span>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                        <h2>Parameters change</h2>

                        <p>
                            Here's a list of all the instanciation and method parameters that changed:
                        </p>

                        <ul class="main-classes-list">
                            <li>
                                <h3>Plane class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <h4>Creation:</h4>
                                        <ul class="internal-classes-list">
                                            <li>
                                                <strong>shareProgram:</strong> this option is deprecated and has been removed.<span class="api-item-version">v8.0</span>
                                            </li>
                                            <li>
                                                <strong>uniforms:</strong> value property now accepts <a href="vec-2-class.html">Vec2</a>, <a href="vec-3-class.html">Vec3</a>, <a href="mat-4-class.html">Mat4</a> and <a href="quat-class.html">Quat</a> class objects.<span class="api-item-version">v7.0</span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <h4>Methods:</h4>
                                        <ul class="internal-classes-list">
                                            <li>
                                                <strong>mouseToPlaneCoords():</strong> now uses a <a href="vec-2-class.html">Vec2</a> class object instead of 2 floats.<span class="api-item-version">v7.0</span>
                                            </li>
                                            <li>
                                                <strong>setRelativeTranslation():</strong> now uses a <a href="vec-3-class.html">Vec3</a> class object instead of 3 floats.<span class="api-item-version">v7.0</span>
                                            </li>
                                            <li>
                                                <strong>setRotation():</strong> now uses a <a href="vec-3-class.html">Vec3</a> class object instead of 3 floats.<span class="api-item-version">v7.0</span>
                                            </li>
                                            <li>
                                                <strong>setScale():</strong> now uses a <a href="vec-2-class.html">Vec2</a> class object instead of 2 floats.<span class="api-item-version">v7.0</span>
                                            </li>
                                            <li>
                                                <strong>setTransformOrigin():</strong> now uses a <a href="vec-3-class.html">Vec3</a> class object instead of 3 floats.<span class="api-item-version">v7.0</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h3>Texture class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <h4>Methods:</h4>
                                        <ul class="internal-classes-list">
                                            <li>
                                                <strong>setScale():</strong> now uses a <a href="vec-2-class.html">Vec2</a> class object instead of 2 floats.<span class="api-item-version">v7.0</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h3>ShaderPass class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <h4>Creation:</h4>
                                        <ul class="internal-classes-list">
                                            <li>
                                                <strong>uniforms:</strong> value property now accepts <a href="vec-2-class.html">Vec2</a>, <a href="vec-3-class.html">Vec3</a>, <a href="mat-4-class.html">Mat4</a> and <a href="quat-class.html">Quat</a> class objects.<span class="api-item-version">v7.0</span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <h4>Methods:</h4>
                                        <ul class="internal-classes-list">
                                            <li>
                                                <strong>mouseToPlaneCoords():</strong> now uses a <a href="vec-2-class.html">Vec2</a> class object instead of 2 floats.<span class="api-item-version">v7.0</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                        <h2>Properties changed</h2>

                        <p>
                            Here's a list of all the object properties name that changed:
                        </p>

                        <ul class="main-classes-list">
                            <li>
                                <h3>Curtains class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <strong>glCanvas:</strong> has been renamed to <a href="curtains-class.html#canvas">canvas</a>.<span class="api-item-version">v7.0</span>
                                    </li>
                                    <li>
                                        <strong>productionMode:</strong> has been renamed to <a href="curtains-class.html#production">production</a>.<span class="api-item-version">v7.0</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h3>Texture class:</h3>
                                <ul class="internal-classes-list">
                                    <li>
                                        <strong>type:</strong> has been renamed to <a href="texture-class.html#source-type">sourceType</a>.<span class="api-item-version">v7.0</span>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>

        </section>
    </div>
</div>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-141413267-1');
</script>

</body>
</html>
